<template>
  <h2>组合api基础</h2>
  <p>{{ count }}</p>
  <button @click="add">btn</button>
  <p>{{ msg }}</p>
</template>

<script>
// 如果变量希望有响应式，那么就需要使用ref
import { ref } from "vue";

export default {
  // setup就是组合api的入口
  // setup也是组件的生命周期,最早的生命周期,里面拿不到this

  // 如果使用了setup，可以不再使用选项api了
  setup() {
    const count = ref(3);
    const add = () => {
      // console.log(count.value);
      count.value++;
    };

    // setup的内容，需要return，才能在template里面使用
    return {
      count,
      add,
    };
  },

  // data() {
  //   return {
  //     count: 3,
  //   };
  // },
  // methods: {
  //   add() {
  //     this.count++
  //   }
  // }
};
</script>
